<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="kerboard.css">
    <link rel="stylesheet" href="./hint/collection.css">
</head>
<body>
<input type="text" id="keyboard-ipt">
<span class="btn btn-default">下一步</span>
<script src="keyboard.js"></script>
<script src = './hint/collection.js'></script>
<script src = './ajax.js'></script>
<script>
    var btn = document.getElementsByClassName('btn btn-default')[0];
    Keyboard({
//        input的输入框的ID
        for:'keyboard-ipt',
//        是否为明文
        clearText:true,
//        验证的长度
        length:11,
//        验证需要的正则
        valiReg:/^1[35789][0-9]{9}$/,
//        输入类容不符合
        validError:function () {
            alert('请填写合法手机号码')
        },
        validSuccess:function () {
//            隐藏键盘
            this.hide();
            var _this = this;
//            弹出提示框提示
            new AddAlert({
                hint: '确认输入手机号码',
                condition:'(86)+' + this.getVal(),
                leftText: '确认',
                rightText: '修改',
                successFn: function () {
                    _this.hide();
                    btn.className = 'btn btn-success';
                    btn.onclick = function () {
//                 发送Ajax请求
                    ajax({
                       mothod:'post',
                       url:'http://localhost:8080/register',
                        data:{
                           telNumber:this.getVal(),
                            step:'1'
                        },
                        contentType:'json',
                        dataType:'json',
                        success:function (data) {

                        },
                        fail:function (error) {

                        }
                    });
                    };
                },
                faillFn: function () {
                    _this.show();
                }
            });


        }
    })

</script>
</body>
</html>